<template>
	<view class="pb20">
		<view class="container auto mt20">
			<view class="fs44 color fw900 pt30 pl30">金水路第一小学</view>
			<!-- 地址 -->
			<view class="address dflex alc mt10 pl30">
				<image src="../images/location-gray.png" mode="heightFix" class="mr6"></image>
				<view class="fs28 gray">郑州市金水区中州大道</view>
			</view>
			<!-- 提交时间 -->
			<view class="mt20 dflex alc pl30">
				<view class="address dflex alc">
					<image src="../images/time.png" mode="heightFix" class="mr6"></image>
					<view class="fs28 gray">提交时间:2023-01-01</view>
				</view>
				<view class="fs28 gray ml40">业务员：王斯</view>
			</view>
			<!-- 进度条 -->
			<view class="progress auto mt30">
				<!-- 总杯数  总金额 结束-->
				<view class="students pt30">
					<view class="pl30"><subtitle title="人数汇总"></subtitle></view>
					<!-- tab栏 -->
					<view>
						<u-tabs
							:list="list"
							@click="handerTabs"
							:lineWidth="0"
							activeStyle="color:#4151db;fontWeight:bold;fontSize:28rpx"
							:lineHeight="0"
							inactiveStyle="color:#999"
						></u-tabs>
						<view class="pl30">
							<view
								v-for="(item, index) in arr"
								:key="item.cid"
								class="classes dflex alc pr30"
								style="margin-bottom: 70rpx;"
							>
								<view class="mr40 fs28 gray fw500">{{ item.classes }}</view>
								<u-line-progress
									:percentage="item.num"
									activeColor="#4151DB"
									:showText="false"
									height="10rpx"
								></u-line-progress>
								<view class="fs28 fw500 color">{{ item.num + '人' }}</view>
							</view>
						</view>
					</view>
				
				
				
				
				
				
				
				
					<view></view>
				</view>
			</view>
		</view>
		<view class="btns dflex alc jcse">
			<view class="textc fs32 color666 fw900" @click="handerJue">拒绝</view>
			<view class="textc white fs32 fw900">同意</view>
		</view>
		<!-- 点击拒绝的弹窗 -->
		<u-popup :show="show" @close="show = false" mode="center" round="10rpx">
			<view class="popup">
				<view class="textc mt50 color fs40 fw900">提示</view>
				<!-- 文本域 -->
				<view class="textarea auto mt20">
					<u--textarea
						v-model="value"
						placeholder="请输入您拒绝的原因......"
						count
						:maxlength="100"
					></u--textarea>
				</view>
				<!-- 按钮 -->
				<view class="buttons dflex alc jcse mt50">
					<view class="textc fs30 color">取消</view>
					<view class="textc white fs30">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { indexList } from '../salesdetails/indexList.js';
export default {
	data() {
		return {
			list: indexList,
			arr: [],
			show: false,
			value: ''
		};
	},
	methods: {
		handerTabs(event) {
			this.arr = event.arr;
			console.log(this.arr);
		},
		handerJue() {
			this.show = true;
		}
	},
	onLoad(options) {
		this.arr = indexList[0].arr; //默认进来加载一年级的
		console.log(options);
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f2f5f9;
}
.container {
	width: 690rpx;
	background: linear-gradient(135deg, rgba(65, 81, 219, 0.2) 0%, rgba(65, 81, 219, 0) 100%);
	border-radius: 20rpx;
	padding-bottom: 30rpx;
}
.address {
	image {
		width: 30rpx;
		height: 30rpx;
	}
}
.progress {
	width: 650rpx;

	background: #ffffff;
	border-radius: 20rpx;
	padding-bottom: 30rpx;
}
.classes:last-child {
	margin-bottom: 0 !important;
}
::v-deep .u-line-progress__background {
	background-color: transparent;
}
.btns {
	margin-top: 224rpx;
	width: 750rpx;
	height: 140rpx;
	background: #ffffff;
	opacity: 1;
	& > view:nth-child(1) {
		width: 330rpx;
		height: 100rpx;
		background: #f2f5f9;
		border-radius: 10rpx;
		line-height: 100rpx;
	}
	& > view:nth-child(2) {
		width: 330rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
		border-radius: 10rpx;
		line-height: 100rpx;
	}
}
.popup {
	width: 610rpx;
	height: 502rpx;
	background: #ffffff;
	border-radius: 10rpx;
	opacity: 1;
}
.textarea {
	width: 530rpx;
	height: 200rpx;
	background: #f7f7f9;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
}
.buttons {
	& > view:nth-child(1) {
		width: 256rpx;
		height: 76rpx;
		background: #f7f7f9;
		border-radius: 10rpx;
		line-height: 76rpx;
	}

	& > view:nth-child(2) {
		width: 256rpx;
		height: 76rpx;
		background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		line-height: 76rpx;
	}
}
</style>
